<template>
  <div class="user-connar">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息
      </el-breadcrumb-item>
      <el-breadcrumb-item>修改用户密码</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div>
        <span>我的个人信息</span>
      </div>
      <el-form label-width="120px">
        <el-form-item label="我的名称:">{{userInfoNew.name}}
        </el-form-item>
        <el-form-item label="我的性别:">男
        </el-form-item>
        <el-form-item label="我的权限:">管理人员
        </el-form-item>
        <el-form-item label="电话号码:">{{userInfoNew.phone}}
        </el-form-item>
        <el-form-item label="我的地址:">{{userInfoNew.position}}
        </el-form-item>
        <el-form-item label="我的邮箱:">1231241@qq.com
        </el-form-item>
        <el-form-item label="个人爱好:">爱美女
        </el-form-item>
        <el-button @click="dialogVisible = true" type="primary" plain size="small">修改个人信息</el-button>
        <el-button @click="dialogVisiblePwd = true" type="primary" plain size="small">修改密码</el-button>
      </el-form>
    </el-card>
    <!-- 弹框修改名称 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
        <el-form label-width="60px" ref="registerformRef" :model='userInfoNew' :rules="registerformRules">
          <el-form-item label="昵称 :" prop="name">
            <el-input placeholder="请输入新昵称" v-model="userInfoNew.name"></el-input>
          </el-form-item>
          <el-form-item label="电话 :">
            <el-input placeholder="我的电话号码" v-model="userInfoNew.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址 :">
            <el-input placeholder="我的地址" v-model="userInfoNew.position"></el-input>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisiblePwd"
      width="30%"
      :before-close="handleClose">
        <el-form label-width="100px" :model='userInfoPwd' ref="registerPwdRef" :rules="registerformRules">
          <el-form-item label="原密码 :" prop="oldPwd">
            <el-input placeholder="请输入原密码" v-model="userInfoPwd.oldPwd"></el-input>
          </el-form-item>
          <el-form-item label="新密码 :" prop="newPwd">
            <el-input placeholder="请输入新密码" v-model="userInfoPwd.newPwd"></el-input>
          </el-form-item>
          <el-form-item label="确认密码 :" prop="newPwd2">
            <el-input placeholder="确认密码" v-model="userInfoPwd.newPwd2"></el-input>
          </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblePwd = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblePwd1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
      dialogVisible: false,
      dialogVisiblePwd: false,
      userInfoNew: {
        name: ''
      },
      userInfoPwd: {
        oldPwd: '',
        newPwd: '',
        newPwd2: ''
      },
      registerformRef: '',
      registerformRules: {
        // 验证用户名
        name: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 位字符', trigger: 'blur' }
        ],
        oldPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 位字符', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 位字符', trigger: 'blur' }
        ],
        newPwd2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 位字符', trigger: 'blur' }
        ]
      }
    }
  },
  beforeCreate () {
  },
  created () {
    this.userInfo()
  },
  beforeMount () {
  },
  mounted () {
  },
  beforeUpdate () {
  },
  Updated () {
  },
  beforeDestroy () {
  },
  destroyed () {
  },

  components: {
  },
  props: {
  },
  computed: {
  },
  watch: {
  },
  methods: {
    async userInfo () {
      try {
        const { data: res } = await this.$http.get('/user')
        this.userInfoNew = res.data
        // if判断就不用了  这个用户是必须要填写的
        this.$message.success('获取用户信息成功')
      } catch (err) {
        this.$message.error('获取用户信息失败')
      }
    },
    onSubmit () {
      console.log('submit!')
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    dialogVisible1 () {
      this.dialogVisible = false
      this.$refs.registerformRef.validate(async valid => {
        if (valid) {
          const { data: res1 } = await this.$http.put('/user', this.userInfoNew)
          console.log(res1)
          this.userInfo()
        } else {
          return this.$message.error('修改失败')
        }
      })
    },
    dialogVisiblePwd1 () {
      this.dialogVisiblePwd = false
      this.$refs.registerPwdRef.validate(async valid => {
        var value1 = this.userInfoPwd.newPwd
        var value2 = this.userInfoPwd.newPwd2
        if (value1 !== value2) {
          return this.$message.error('输入的两次密码错误')
        }
        if (valid) {
          const { data: res2 } = await this.$http.put('/user/pwd', {
            newPwd: this.userInfoPwd.newPwd,
            oldPwd: this.userInfoPwd.oldPwd
          })
          console.log(res2)
          this.userInfo()
        } else {
          this.$message.error('修改失败')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.user-connar {
  font-size: 40px;
  /deep/.box-card {
    width: 100%;
    .el-form {
      .el-form-item {
        .el-form-item__label {
          font-size: 16px;
          img {
            height: 30px;
            width: 30px;
          }
        }
        .el-form-item__content {
          font-size: 16px;
          .el-button {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
